<!DOCTYPE html>
<html lang="en-US" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录日志</title>
<link rel="stylesheet" th:href="@{~/component/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{~/component/pear/css/pear-module/dtree/dtree.css}" media="all">
<link rel="stylesheet" th:href="@{~/component/pear/css/pear-module/dtree/font/dtreefont.css}" media="all">
<link rel="stylesheet" th:href="@{~/component/pear/css/pear-module/button.css}" media="all">
<link rel="stylesheet" th:href="@{~/common/css/common.css}" media="all">
</head>
<body style="overflow-y: hidden;">
	<div class="my-header ">
		<div >
			<form class="layui-form layui-inline" name="searchForm">
				<div class="layui-input-inline">
				  <input type="text" name="username"  autocomplete="off" placeholder="请输入用户账号" class="layui-input">
				</div>
				<div class="layui-input-inline">
				  <input type="text" name="ip"  autocomplete="off" placeholder="请输入ip" class="layui-input">
				</div>
				
				<div class="layui-input-inline">
				  <select name="online">
			        <option value="">请选择状态</option>
			        <option value="0">在线</option>
			        <option value="1">离线</option>
			      </select>
				</div>
			
				<div style="margin-top: 16px;">
					<div class="layui-inline">
						<button sec:authorize="hasAuthority('log:login:select')" type="button" class="pear-btn pear-btn-success" lay-submit lay-filter="search"><i class="layui-icon layui-icon-search"></i> 查询</button>
					</div>
					<div class="layui-inline">
						<button sec:authorize="hasAuthority('log:login:select')" type="reset"  class="pear-btn pear-btn-warming" ><i class="layui-icon layui-icon-refresh"></i> 重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>

<!-- 列表表格数据 -->
<table class="my-table" id="loginlog-table" lay-filter="loginlog-table"></table>

<!-- 列表工具：编辑、删除 -->
<script type="text/html" id="loginlog-bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="details" title="详情"><i class="layui-icon layui-icon-search">详情</i></button>

</script>

<script th:src="@{~/component/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{~/component/pear/pear.js}" charset="utf-8"></script>
<script th:src="@{~/common/js/jquery-1.11.2.min.js}" charset="utf-8"></script>
<script type="text/javascript">

layui.use(['form', 'layedit', 'laydate','element','table','dtree'], function(){
	var $ = layui.jquery
	  ,form = layui.form
	  ,layer = layui.layer
	  ,laypage = layui.laypage
	  ,table = layui.table
	  ,dtree = layui.dtree;
	
	/* 表格渲染 */
	table.render({
	  elem: '#loginlog-table' //指定原始表格元素选择器（推荐id选择器）
	  ,url: '/loginlog/list'
	  ,toolbar:true
	  ,defaultToolbar: ['filter']
	  ,parseData: function(res){ //res 即为原始返回的数据
		  	if(res.code != 0){
	  			layer.msg(res.msg,{icon:2,time:2000});
	  			return;
	  		}
		    return {
		      "code": res.code, //解析接口状态
		      "msg": res.msg, //解析提示文本
		      "count": res.data.total, //解析数据长度
		      "data": res.data.list //解析数据列表
		    };
	   }
	  ,page: true
	  ,height: 'full-188' //容器高度
	  //设置表头
	  ,cols: [ [
		  	{checkbox: true}
		    ,{type: 'numbers', title: '序号', width: 80, align: 'center',}
		    ,{field: 'username', title: '用户账号', align: 'center'}
		    ,{field: 'ip', title: 'ip', align: 'center'}
		    ,{field: 'address', title: '操作地点', align: 'center'}
		    ,{field: 'os', title: '系统', align: 'center'}
		    ,{field: 'browser', title: '浏览器', align: 'center'}
		    ,{field: 'onlineText', title: '状态',  align: 'center',templet: '#titleTpl'}
		    ,{field: 'createTime', title: '登录时间', align: 'left',width:200}
		    //,{toolbar: '#loginlog-bar', title: '操作', minWidth: 100,  align: 'left',}
	  ]] 
	  
	});
	
	/* 工具条上的事件 */
	table.on('toolbar(loginlog-table)', function(obj) {
		if (obj.event === 'refresh') {
			window.refresh();
		}
	});
	
	/* 列表中的工具上的按钮事件 */
	table.on('tool(loginlog-table)', function(obj) {
		if (obj.event === 'details') {
			window.details(obj);
		}
	});
	
	/* 点击查询按钮 */
	form.on('submit(search)', function(data) {
		table.reload('loginlog-table', {
			where: data.field
		})
		return false;
	});
		
	/* 刷新table */
    window.refresh = function(param) {
		table.reload('loginlog-table');
	}
	
    /* 点击编辑，弹出编辑页面 */
    window.details = function(obj) {
		layer.open({
			type: 2,
			title: '操作日志详情',
			shade: 0.1,
			area: ['94%', '96%'],
			content: '/loginlog-details?id='+obj.data.id
		}); 
    	
	}
	
})

</script>

<script type="text/html" id="titleTpl">
  {{#  if(d.online == 0){ }}
    <div style="color: #fff;background-color: #5FB878;width: 66px;border-radius: 16px;">{{d.onlineText}}</div>
  {{#  } else { }}
	<div style="color: #fff;background-color: #FF5722;width: 66px;border-radius: 16px;">{{d.onlineText}}</div>
  {{#  } }}
</script>

</body>
</html>